<template>
	<view class="sendPass">
		<navBar isBack backColor="#333" title="收货待确认" color="#333" background="#fff"></navBar>
		<view class="title">
			勾选已收到货的包裹
		</view>
		<view class="box" v-show="order_info.send_data.length">
			<!-- 包裹信息 -->
			<view class="boxItem" v-for="(item,index) in order_info.send_data" :key="index">
				<view class="packageInfo">
					<view class="numBox">
						<view class="selectSendOk" :class="{'sendActive':item.checked}" @click="toSelect(index)">
							<u-icon size="24" name="checkmark"></u-icon>
						</view>
						<view class="num">{{item.send_name}}</view>
					</view>
					<view class="info">
						<view class="code">
							{{item.express_name}} | {{item.courier_num}}
							<image :src="`${baseImg}/static/adminShop/copy.png`" mode=""></image>
						</view>
						<view class="time">
							发货时间 | {{$moment(item.send_time*1000).format('yyyy-MM-DD HH:mm:ss')}}
						</view>
					</view>
				</view>
				<view class="list">
					<view class="item" v-for="(item1,index1) in item.list" :key="index1">
						<image :src="item1.main_imgurl" mode=""></image>
						<view class="shopInfo">
							<view class="top">
								<view class="tit omit-2">
									{{item1.product_title}}
								</view>
								¥ {{item1.price}}
							</view>
							<view class="spec">
								<view class="specItem">
									<span v-for="(item2,index2) in item1.attr_params" :key="index2">{{item2.value}}</span>
								</view>
								<span>x{{item1.num}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 确认按钮 -->
		<view class="okBtn">
			<view class="left" @click="allCheck">
				<view class="selectSendOk" :class="{'sendActive':allChecked}" >
					<u-icon size="24" name="checkmark"></u-icon>
				</view>
				全选
			</view>
			<view class="right">
				<button type="default" @click="toOk">确认（{{num}}）</button>
			</view>
		</view>
		<!-- 确认弹出框 -->
		<view class="popShadow" v-if="popShow">
			<view class="center">
				<view class="box">
					<view class="top">
						<!-- <image src="../../../static/common/swiper-3.jpg" mode=""></image> -->
						<view class="info">
							<view class="mobile">ggg<span>12365478951</span></view>
							<view class="address omit-2">
								广东省广州市从化区广州大学华软软件学院广从南路广东省广州市从化区广州大学华软软件学院广从南路
							</view>
						</view>
					</view>
					<view class="bottom">
						<image src="../../../static/login/logo.png" mode=""></image>
						<view class="text">
							出示该二维码
							<text>客户扫码确认收货</text>
						</view>
					</view>
				</view>
				<image class="closeImg" @click="toClose" :src="`${baseImg}/static/adminShop/tocancel.png`" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseImg:this.$static,
				order_id:null, //订单id
				order_info:{},
				allChecked:false,
				popShow:false
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.getOrderDetail()
		},
		computed:{
			num(){
				let num = 0
				if(this.order_info.send_data){
					this.order_info.send_data.map(item=>{
						if(item.checked){
							num++
						}
					})
				}
				return num
			}
		},
		methods:{
			// 获取订单详情
			getOrderDetail(){
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					store_id:this.$store.state.index.sid,
					order_id:this.order_id
				}
				this.$api.getOrderDetail(params).then(res=>{
					console.log(res,'订单详情')
					if(res.code==1){
						res.data.send_data.map(item=>item.checked = false)
						this.order_info = res.data?res.data:{},
						console.log(this.order_info,'确认收货')
						uni.hideLoading()
					}
				})
			},
			
			// 选择包裹
			toSelect(index){
				if(this.order_info.send_data[index].checked){
					this.order_info.send_data[index].checked = false
				}else{
					this.order_info.send_data[index].checked = true
				}
				let check = this.order_info.send_data.every(item=>item.checked)
				console.log(check,'单选')
				this.allChecked = check
			},
			// 点击全选
			allCheck(){
				if(this.allChecked){
					this.allChecked = false
					this.order_info.send_data.map(item=>{
						item.checked = false
					})
				}else{
					this.allChecked = true
					this.order_info.send_data.map(item=>{
						item.checked = true
					})
				}
			},
			// 点击确认按钮
			toOk(){
				this.popShow = true
			},
			
			// 关闭图标
			toClose(){
				this.popShow = false
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.sendPass{
		padding: 0 24rpx;
		.title{
			width: 702rpx;
			height: 76rpx;
			background-color: #FFF0F0;
			border-radius: 16rpx;
			color: #E9423E;
			font: 400 26rpx/76rpx PingFang SC;
			text-align: center;
			margin: 24rpx 0;
		}
		.box{
			// padding-top: 28rpx;
			border-bottom: 2rpx solid #F5F5F5;
		}
		.boxItem{
			margin-bottom: 24rpx;
			width: 702rpx;
			border-radius: 16rpx;
			background-color: #fff;
			padding: 40rpx 28rpx 8rpx;
		}
		// 包裹信息
		.packageInfo{
			margin:10rpx 0 32rpx 0;
			display: flex;
			justify-content: space-between;
			// 已发货
			.numBox{
				display: flex;
				align-items: center;
				.num{
					height: 36rpx;
					padding: 0rpx 8rpx;
					font: 400 22rpx/36rpx PingFang SC;
					color: #fff;
					background-color: #E7AD14;
					border-radius: 4rpx;
				}
				.selectSendOk{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					margin-right: 24rpx;
					border: 2rpx solid #D8D8D8;
					background-color: #fff;
					color: transparent;
				}
				// 选中
				.sendActive{
					background-color: #DBA954;
					color: #fff;
					border-color: #DBA954;
				}
			}
			// 未发货
			.packageActive{
				background: #E5675A;
			}
			.info{
				font: 400 22rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.code{
					width: 376rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					image{
						width: 32rpx;
						height: 32rpx;
					}
					margin-bottom: 8rpx;
				}
			}
		}
		
		.list{
			.item{
				display: flex;
				margin-bottom: 32rpx;
				image{
					width: 148rpx;
					height: 148rpx;
					border-radius: 8rpx;
				}
				.shopInfo{
					width: 478rpx;
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					.top{
						color: #505050;
						font: 400 26rpx/40rpx PingFang SC;
						.tit{
							width: 328rpx;
						}
						display: flex;
						justify-content: space-between;
					}
					.spec{
						display: flex;
						justify-content: space-between;
						margin-top: 40rpx;
						color: #A0A0A0;
						font: 400 22rpx/22rpx PingFang SC;
					}
				}
			}
		}
		// 确认按钮
		.okBtn{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding: 0 24rpx;
			height: calc(120rpx+ constant(safe-area-inset-bottom));
			height: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			.left{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 20rpx 0;
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.selectSendOk{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					border: 2rpx solid #D8D8D8;
					background-color: #fff;
					color: transparent;
					margin-bottom: 12rpx;
				}
				// 选中
				.sendActive{
					background-color: #DBA954;
					color: #fff;
					border-color: #DBA954;
				}
			}
			.right{
				button{
					width: 606rpx;
					height: 80rpx;
					margin: 20rpx 0;
					background: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
					box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
					color: #fff;
					font: 500 32rpx/80rpx PingFang SC;
					border-radius: 46rpx;
				}
			}
		}
		// 弹出框
		.popShadow{
			width: 100%;
			height: 100%;
			position: fixed;
			z-index: 520;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,0.6);
			.center{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin:auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 640rpx;
				.closeImg{
					width: 88rpx;
					height: 88rpx;
					margin-top: 60rpx;
				}
				.box{
					width: 100%;
					height: 806rpx;
					border-radius: 8rpx;
					padding: 40rpx 24rpx;
					background-color: #fff;
					.top{
						display: flex;
						align-items: center;
						padding-bottom: 56rpx;
						border-bottom: 2rpx dashed #D8D8D8;
						image{
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
						.info{
							width: 460rpx;
							display: flex;
							flex-direction: column;
							margin-left: 28rpx;
							.mobile{
								font: 500 26rpx/40rpx PingFang SC;
								color: #0A0605;
								span{margin-left: 22rpx;}
							}
							.address{
								font: 400 26rpx/40rpx PingFang SC;
								color: #333333;
								margin-top: 16rpx;
							}
						}
					}
					.bottom{
						display: flex;
						flex-direction: column;
						align-items: center;
						padding-top: 40rpx;
						image{
							width: 392rpx;
							height: 392rpx;
						}
						.text{
							margin-top: 28rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							color: #6C6C6C;
							font: 400 26rpx/46rpx PingFang SC;
						}
					}
				}
			}
		}
	}
</style>
